<script setup>
import Layout from "@/components/Layout.vue";
import userEdit from "@/assets/imgs/mine/user-edit.png";
import userPic from "@/assets/imgs/mine/user-pic.png";
import bag from "@/assets/imgs/mine/mine-bag.png";
import address from "@/assets/imgs/mine/mine-address.png";
import kefu from "@/assets/imgs/mine/mine-kefu.png";
import request from "../utils/request";
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
import {usePerson} from '../stores'
const personStore = usePerson()
const {username,nickname} = personStore
const route = useRoute();
const router = useRouter();
const userId = localStorage.getItem("userId");
// const username = ref('')
const password = ref("");
const mobile = ref('');

const jumptoeditPerson = () => {
  router.push("/editPerson")
    
};

</script>

<template>
  <layout>
    <div class="back">
      <van-icon
        :name="userEdit"
        size="22"
        class="user-edit"
        @click="jumptoeditPerson"
      />
      <div class="user-info top">
        <van-image
          width="100"
          height="100"
          class="user-pic"
          round
          :src="userPic"
        />
        <div class="user-name">
          <p>{{ nickname }}</p>
          <p>ID:{{ username }}</p>
        </div>
        <van-row class="user-others">
          <van-col span="6">
            <p>红包</p>
            <span>218</span>
          </van-col>
          <van-col span="6">
            <p>优惠卷</p>
            <span>12张</span>
          </van-col>
          <van-col span="6">
            <p>鲜豆</p>
            <span>88</span>
          </van-col>
          <van-col span="6">
            <p>白条</p>
            <span>1000</span>
          </van-col>
        </van-row>
      </div>
      <div class="user-info bottom">
        <van-cell title="我的钱包" is-link to="/">
          <template #title>
            <van-icon class="custom-icon" :name="bag" size="22" />
            <span class="custom-title">我的钱包</span>
          </template>
        </van-cell>
        <van-cell is-link @click="router.push('/manageradr')">
          <template #title>
            <van-icon class="custom-icon" :name="address" size="22" />
            <span class="custom-title">我的地址</span>
          </template>
        </van-cell>
        <van-cell is-link to="/">
          <template #title>
            <van-icon class="custom-icon" :name="kefu" size="22" />
            <span class="custom-title">我的客服</span>
          </template>
        </van-cell>
      </div>
    </div>
  </layout>
</template>
<style scoped lang="scss">
.back {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 15vh 14px 0 14px;
  background-image: url(../assets/imgs/mine/mine-bg.png);
  background-size: cover;
  .user-edit {
    position: absolute;
    top: 44px;
    right: 24px;
  }
  .user-info {
    position: relative;
    width: 100%;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(164, 164, 164, 0.505);
    margin-bottom: 18px;
    .user-pic {
      position: absolute;
      top: -48px;
      left: 0;
      right: 0;
      margin: auto;
      width: 95px;
      height: 95px;
    }
    .user-name {
      border-bottom: 1px solid #eee;
      p:first-child {
        font-size: 26px;
      }
      p:nth-child(2) {
        color: rgb(149, 149, 149);
        margin-bottom: 10px;
      }
    }
    .user-others {
      height: 70px;
      p {
        padding-top: 10px;
        height: 38px;
        line-height: 38px;
        color: #8f8f8f;
      }
      span {
        height: 43px;
        line-height: 43px;
        font-size: 22px;
      }
    }
  }
  .user-info.top {
    text-align: center;
    padding: 60px 0 20px 0;
  }
  .custom-title {
    font-weight: 600;
  }
  .custom-icon {
    position: relative;
    top: 4px;
    margin-right: 10px;
  }
}
</style>
